﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>根据元素内容或属性选择</title>
    <style type="text/css">
        p.selected {
            background-color: cyan;
        }
    </style>
</head>
<body>
    <div>
        <p>Microsoft: Windows Azure, Bing, Windows Phone, Office 365</p>
        <p title="google">Google: App Engine, Google Search, Android, Google Docs</p>
        <p class="oracle">Oracle：MySQL, Solaris, Java</p>
        <p>IBM：AIX, DB2, Websphere</p>
    </div>
    <div>
        <input id="cbx1" type="checkbox" checked="checked" />
        <label for="cbx1">Java</label>
        <input id="cbx2" type="checkbox" />
        <label for="cbx2">.NET</label>
        <input id="cbx3" type="checkbox" />
        <label for="cbx3">C++</label>
    </div>
    <div>
        <select id="skills" multiple="multiple">
            <option selected="selected">.NET</option>
            <option>Java</option>
            <option>C++</option>
            <option>Python</option>
        </select>
    </div>
    <div>
        <input type="button" value="根据元素内容选择" onclick="selectByContent()" />
        <input type="button" value="根据元素属性选择" onclick="selectByAttribute()" />
        <input type="button" value="选择Checked状态的复选框" onclick="selectChecked()" />
        <input type="button" value="选择列表框中被选中的项" onclick="selectSelected()" />
    </div>

    <script type="text/javascript" src="scripts/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        function selectByContent() {
            $('p:contains("Azure")').toggleClass("selected");   //选中内容中包含"Azure"字符串的p元素
        }
        function selectByAttribute() {
            $('p[class="oracle"]').css("color", "red");     //选中具有class="oracle"属性的p元素
            $('p[title="google"]').css("color", "green");   //选中具有title="google"属性的p元素
        }
        function selectChecked() {
            var length = $("input:checked").length;         //选中被check的所有复选框，得到元素个数
            alert(length + "个Checkbox元素被选中");
        }
        function selectSelected() {
            var length = $("#skills option:selected").length;   //选中ID为skills的元素中所有被selected的option，得到元素个数
            alert(length + "个Option元素被选中");
        }
    </script>
</body>
</html>
